<template>
	<view class="l_edit" :style="{height:`${height}`,width:'100%',overflowY:'auto'}">
		<view class="editor-box">
			<sp-editor :toolbar-config="{
          excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck','link','export','scriptSub','scriptSuper','direction','removeFormat','clear','undo','redo',...excludeKeys],
          iconSize: '18px',
        }" @init="initEditor" @input="inputOver" @overMax="overMax" :placeholder="placeholder"
				@upinImage="upinImage"></sp-editor>
		</view>
	</view>
</template>

<script>
	import SpEditor from '../sp-editor/sp-editor.vue'
	import {
		upload,
	} from '@/utils/request.js';
	import {
		Api
	} from '@/utils/Api'
	export default {
		components: {
			SpEditor
		},
		props: {
			height: {
				type: String,
				default: '600rpx'
			},
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请输入内容'
			},
			uploadUrl: {
				type: String,
				default: ''
			},
			excludeKeys: {
				type: Array,
				default: () => {
					return ['image']
				}
			},


		},
		data() {
			return {
				editorIns: null,
				content: ''
			};
		},
		watch: {
			value: {
				handler: function(newVal) {
					this.content = newVal
					if (newVal) {
						this.$nextTick(() => {
							this.preRender()
						})
					}
				},
				immediate: true
			}
		},
		methods: {
			/**
			 * 获取输入内容
			 * @param {Object} e {html,text} 内容的html文本，和text文本
			 */
			inputOver(e) {
				// 可以在此处获取到编辑器已编辑的内容
				console.log("==== inputOver :", e);
				const {
					html
				} = e
				console.log("this.isNull(html)",this.isNull(html))
				if (this.isNull(html)) {
					this.content = ''
				} else {
					this.content = html
				}
				console.log("this.content",this.content)
				// this.$emit('change', html)
			},
			//是否为空
			isNull(content) {
				let filterContent = content.replace(/<[^<>|<(?!img)[^>]+>/g, "").replace(/&nbsp;/gi, "")
				if (filterContent == "") return true;
				let regu = "^[ ]+$";
				let re = new RegExp(regu);
				return re.test(filterContent);
			},

			/**
			 * 超出最大内容限制
			 * @param {Object} e {html,text} 内容的html文本，和text文本
			 */
			overMax(e) {
				// 若设置了最大字数限制，可在此处触发超出限制的回调
				console.log("==== overMax :", e);
			},
			/**
			 * 编辑器就绪
			 * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
			 * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
			 * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
			 */
			initEditor(editor) {
				this.editorIns = editor; // 保存编辑器实例
				console.log("this.editorIns", this.editorIns)
				// 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
				this.preRender();
			},
			preRender() {
				setTimeout(() => {
					console.log("this.content",this.content)
					// 异步获取后端数据后，初始化编辑器内容
					this.editorIns.setContents({
						html: this.content,
					});
				}, 1000);
			},
			//上传图片后
			async upinImage(file, editorCtx, editorId) {
				console.log("upinImage", {
					file,
					editorCtx,
					editorId,
					uploadUrl: this.uploadUrl
				})
				if (file && file.length) {
					for (let i = 0; i < file.length; i++) {
						uni.showLoading({
							title: '上传中请稍后',
							mask: true
						})
						let res = null
						// #ifdef MP-WEIXIN
						res = await upload(this.uploadUrl, file[i].tempFilePath)
						// #endif
						// #ifndef MP-WEIXIN
						res = await upload(this.uploadUrl, file[i].path)
						// #endif
						console.log("upinImage-res", res)
						const record = res.data
						const path = record.visualPath + '/' + record.diskName;
						const _url = path ?
							Api.baseUrl + (path && path.startsWith('/') ? path : `/${path}`) :
							'';
						editorCtx.insertImage({
							src: _url,
							width: "80%", // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
							success: function() {
								uni.hideLoading()
							},
						});
					}
					console.log("getContents",this.editorIns.getContents())
					// this.content = 
				}
			}

		},
		model: {
			prop: 'value',
			event: 'change',
		},
	};
</script>